<!--  -->
<template>
  <div>
    <Header></Header>
    <div class="main" id="main">
      <div>
        <searchformVue :opts="options" :optskey="value" @searchchild="searchchild"></searchformVue>
      </div>
     
      <div class="container">

      <router-link to="/journals" >  <div class="nav-link"><i class="el-icon-location"></i>期刊资源</div></router-link> 

      <div  class="el-container elcontainer">
         <el-aside style="width: 230px" class="sidebar-filter">
          <dl >
          <dt class="tit"  groupitem="分类导航">
              <b>分类导航</b>
            </dt>
            <el-tree
              ref="tree"
              node-key="classcode"
              :data="dlcls"
              :props="props"
            
              @check="checktree"
              show-checkbox>
            </el-tree>
           
          </dl>
     
        </el-aside>
     
      <div class="rightbox">
       <div class="classify">
        <div class="classify_item">
          <div  class="classify_item_title">刊首字母:</div>
          <ul class="classify_item_check"> 
          
          <li v-for="(item,index) in lmszm" :key="index" :class="{'classify_item_check_active':clsitemact==index}" @click="changezm(index,item)"> {{item}} </li>
         
          </ul>
       
        </div>
        <div  class="classify_more"></div>
       </div>
        <div class="piclist">
        <div class="colPic" v-for="item in cjfxlist" :key="item.pinyinName">
             <cjfxitemVue :itemdata="item"></cjfxitemVue>
        </div>

      
      </div>
           <div class="paginationdiv">
              <el-pagination
                background
                layout="total,prev, pager, next,jumper"
                :total="total"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
       </div>
      </div>
            
    </div>
  

          </div>
  </div>
</template>

<script>

import Header from "../common/header.vue";
import searchformVue from "../common/searchform.vue";
import { getList,searchcjfx,getdjcls} from "@/api/cjfx";
import cjfxitemVue from './cjfxitem.vue';

export default {
  name: "",
  components: { searchformVue, Header,cjfxitemVue },
  props: {},
  data() {
    return {
    pyszm:'',
     clsitemact:0,
      cjfxlist:[],
      cjfxdatalist:[],
    //  index:0,
        dlcls:[],
            props: {
          label: 'title',
          children: 'child',
         
        },
        syscheckcodes:[],
        lmszm:["全部",'A','B','C','D','E','F','H','I','J','K','L','M'
          ,'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
      page: 1,
      pagesize: 15,
      totalPage:20,
      total:1000,
      options: [
        {
          value: "c_name",
          label: "刊名",
        },
      
        {
          value: "主办单位1",
          label: "主办单位",
        },
      ],
      value: "c_name",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getDataList();
   // this.searchcjfx();
   this.getdjcls()
   //this.getcjfxcls()
  },
  methods: {
        
      async searchcjfx() {
      var data = await searchcjfx(
      "党校",this.page,this.pagesize,
      );
     /// console.log("es结果",data.data.data);
     // this.cjfxdatalist=data.data.data.list
     // this.total=data.data.data.totalCount
      //this.totalPage=data.data.data.totalPage
    },

       async getdjcls(){
        var data = await getdjcls({});
        console.log("djcls",data.data.data);
        this.dlcls=data.data.data

        },

    
        async getDataList() {
      var data = await getList({
        title: this.bookname,
        page: this.page,
        limit: this.pagesize,
        pyszm:this.pyszm,
        syscodes:this.syscheckcodes
        
      });
      console.log(data.data.data);
      this.cjfxlist=data.data.data.list
      this.total=data.data.data.totalCount
      this.totalPage=data.data.data.totalPage
    },

    changezm(index,item){
     console.log("wo dian ji l",index)
      this.clsitemact=index
      this.pyszm=item
      this.page=1
      this.getDataList();

    },
      search(){
         this.page=1;
         this.getDataList()
     },
         handleCurrentChange(val) {
         document.getElementById("main").scrollIntoView()
        this.page=val
        this.getDataList()
       
      },
   checktree(checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys){
       const checkedNodeschild = [];
       const checkedKeyss=checkedKeys.checkedKeys;
     
       let newArray = [];
       if(checkedKeys.checkedNodes.length>0){
      checkedKeys.checkedNodes.forEach(element => {
           if(element.child){
              element.child.forEach(
                elementchid=>{
                  checkedNodeschild.push(elementchid.syscode)
                }
              )
           }
       });
     checkedKeyss.forEach(item=>{
      if(!checkedNodeschild.includes(item)){
          newArray.push(item)
      }
     })
        if(newArray.length>0){
           console.log('最终节点',newArray)
           this.syscheckcodes=newArray;
           this.getDataList()
        }
       }
       else{
        this.syscheckcodes=[];
        this.getDataList()
       }
     
   },
      searchchild(optskey,serachtext){

        
        this.bookname=serachtext
        console.log("触发检索",optskey,serachtext)
        this.getDataList();

      }
  },
};
</script>
<style lang='css' scoped>

.elcontainer {
    /* margin-top: 20px; */
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
}
.main {
  margin-top: 80px;
  overflow: hidden;
}
.container {
  margin-top: 10px;
}
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1140px;
  }
}
.product-item {
  margin-bottom: 30px;
  text-align: center;
  background: #f9f9f9;
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}


.rightbox{
  /* overflow: hidden; */
}
.piclist{
display: flex;
    flex-wrap: wrap;
}
.colPic {
    width: 20%;
    float: left;
    text-align: center;
    position: relative;
    border-bottom: 1px dashed #D9D9D9;
    padding-bottom: 15px;
    padding-top: 15px;
}

.colPic img {
    border: 1px solid #dfdfdf;
    width: 160px;
    height: 210px;
    margin: 5px;
    padding: 5px;
}
.paginationdiv {
  text-align: center;
  padding: 10px;
}

.nav-link {
   
    min-width: 100px;
    height: 31px;
    padding: 0 10px;
    /* margin-top: 17px;
    margin-bottom: 8px; */
   
    color: #222;
    font-size: 14px;
    line-height: 31px;
    text-decoration: none;
}

.sidebar-filter {
  width: 230px;
}

.sidebar-filter dl+dl {
    margin-top: 10px;
}

.sidebar-filter dl {
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 3px 0 rgb(210 210 210 / 75%);
  -o-box-shadow: 0 2px 3px 0 rgba(210, 210, 210, 0.75);
  -ms-box-shadow: 0 2px 3px 0 rgba(210, 210, 210, 0.75);
  -moz-box-shadow: 0 2px 3px 0 rgba(210, 210, 210, 0.75);
  -webkit-box-shadow: 0 2px 3px 0 rgb(210 210 210 / 75%);
}
.sidebar-filter dt.tit {
  color: #333;
  background-color: #e3ecfd;
}
.sidebar-filter dt {
  position: relative;
  z-index: 1;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-weight: bold;
  clear: both;
}
.sidebar-filter dd {
  position: relative;
  z-index: 2;
  width: 226px;
  overflow: hidden;
  padding-bottom: 18px;
}
.sidebar-filter dd .resultlist ul {
  float: left;
  width: 224px;
  padding-top: 7px;
  padding-bottom: 10px;
  max-height: 268px;
  overflow-y: auto;
}
.sidebar-filter dl li {
  padding-left: 12px;
  line-height: 25px;
  clear: both;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  *line-height: 25px;
}
.sidebar-filter dt.tit b {
    display: block;
    padding-left: 12px;
}
.sidebar-filter dt.tit .icon {
    position: absolute;
    z-index: 2;
    cursor: pointer;
}

.sidebar-filter dt .icon-arrow {
    top: 12px;
    right: 15px;
    width: 10px;
    height: 20px;
    background: url(../../assets/img/icon-jt.png) no-repeat -10px -20px;
}

.sidebar-filter .off .icon-arrow {
    background-position: 0 -20px;
}

.classify {
  
   
    margin-left: 25px;
}
.classify .classify_item {
    margin: 4px 0;
}
.classify .classify_item .classify_item_title {
    position: absolute;
    float: left;
    font-size: 14px;
    font-weight: 700;
    color: #484848;
    padding: 2px 0;
    text-align: right;
}
.classify_item .classify_item_check {
    margin-left: 70px;
}

.classify_item .classify_item_check .classify_item_check_active {
    box-shadow: 0 0 0 0 #fff;
    background: #fff;
    border-color: red;
}
.classify_item .classify_item_check li {
    list-style: none;
    display: inline-block;
    font-size: 14px;
    color: #417dc9;
    background-color: #f1f9ff;
    border: 1px solid #b8e0ff;
    outline: none;
    margin: 3px 4px;
    border-radius: 0;
    padding: 2px 6px;
    height: 27px;
    line-height: 23px;
    cursor: pointer;
}
.classify .classify_more {
    display: block;
    border-top: 1px solid #d4ecff;
    margin-top: 10px;
}
</style>